<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_input新增type的属性</title>
</head>
<body>
<!--form的新属性 novalidate:不进行任何校验-->
<form action="#" novalidate>
    <label>
        邮箱:
<!--        type:email邮箱-->
        <input type="email" name="email"  autocomplete="off">
    </label>
    <br>
<!--
type:number数值
max最大值
min最小值
step变化步长
-->
    <label>
    数值:<input type="number" name="num" step="2" max="100" min="20">
    </label>
    <br>
<!--
type:search搜索,更侧重语义化
-->
    <label>
        搜索:<input type="search" name="keyword">
    </label>
    <br>
<!--    type:tel电话,输入时弹出的输入框是电话拨号键盘-->
    <label>
        电话:<input type="tel" name="phone">
    </label>
    <br>
<!--
type:range:范围调节框,可以滑动调节
value:当前值
min:最小值
max:最大值
-->
    <label>
        强度:<input type="range" name="range" value="80" min="10" max="80">
    </label>
    <br>
<!--    type:color颜色,拾色器-->
    <label>
        颜色:<input type="color" name="color" value="#0fa9eb">
    </label>
    <br>
<!--    日期选择框
type:date
-->
    <label>
        日期:<input type="date" name="date" value="2024-09-11">
    </label>
    <br>
<!--    月份选择框
type:month
-->
    <label>
        月份:<input type="month" name="month" value="9">
    </label>
    <br>
<!--    周选择框
type:week
-->
    <label>
        周:<input type="week" name="week" >
    </label>
    <br>
<!--    时间选择框
type:time
-->
    <label>
        时间:<input type="time" name="time" >
    </label>
    <br>
<!--    日期+时间
type:datetime-local
-->
    <label>
        日期+时间:<input type="datetime-local" name="datetime-local" >
    </label>
    <br>
    <button type="submit">提交</button>
</form>
</body>
</html>